<template>
  <el-input ref="input" type="number" v-model="currentValue" :min="min" :max="max" @input="changeInput" @focus="focus" @change="changeValue" :disabled="disabled"/>
</template>

<script>
export default {
  name: "BaseInputNumber",
  model: {
    prop: 'value',
  },

  props: {
    value: {
      type: Number,
      default: 0,
    },
    min: {
      type: Number,
      default: -Infinity
    },
    max: {
      type: Number,
      default: -Infinity
    },
    disabled: {
      type: Boolean,
      default: false
    },
  },

  data() {
    return {
      currentValue: this.value,
      lastValue: this.value
    }
  },

  methods: {
    focus() {
      this.$refs.input.select();
      this.$emit("focus");
    },

    changeInput(value) {
      this.$emit('input', value);
    },

    changeValue(value) {
      if (isNaN(Number(value))) {
        this.currentValue = this.lastValue;
        return;
      }
      this.lastValue = value;
      this.$emit("change", Number(value));
    },
  },

  watch: {
    value() {
      this.currentValue = this.value;
    }
  }
}
</script>

<style scoped>
</style>